<template>
  <div class="outbox">
    <transition name="toggle">
      <div class="animation-box" v-if="loginOrRegister">
        <div class="loginbox">
          <el-form
            ref="loginRef"
            :rules="loginDataRules"
            label-width="100px"
            :model="loginData"
            style="max-width: 460px; min-width: 250px"
            label-position="top"
          >
            <div class="title">语山后台管理系统</div>
            <el-form-item label="邮箱" prop="email">
              <el-input
                placeholder="邮箱"
                clearable
                v-model="loginData.email"
              />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                placeholder="密码"
                clearable
                type="password"
                v-model="loginData.password"
                show-password
                @keydown.enter="handleLogin"
              />
            </el-form-item>
            <el-button type="primary" @click="handleLogin">登入</el-button>
            <el-button @click="loginOrRegister = false">去注册</el-button>
          </el-form>
        </div>
      </div>
      <div class="animation-box" v-else>
        <div class="righsterbox">
          <el-form
            ref="registerRef"
            :rules="registerDataRules"
            label-width="100px"
            :model="registerData"
            style="max-width: 460px; min-width: 250px"
            label-position="top"
          >
            <div class="title">欢迎使用语山后台管理系统</div>
            <el-form-item label="昵称" prop="nickname">
              <el-input
                placeholder="昵称"
                clearable
                v-model="registerData.nickname"
              />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input
                placeholder="邮箱"
                clearable
                v-model="registerData.email"
              />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                placeholder="密码"
                type="password"
                clearable
                show-password
                v-model="registerData.password"
              />
            </el-form-item>
            <el-form-item label="确认密码" prop="passwordagain">
              <el-input
                placeholder="确认密码"
                type="password"
                show-password
                v-model="passwordagain"
                clearable
              />
            </el-form-item>
            <el-form-item label="管理员授权码">
              <el-input
                placeholder="注册管理员需要授权码"
                clearable
                v-model="authorizationCode"
              />
            </el-form-item>
            <el-button type="primary" @click="handleRegister">注册</el-button>
            <el-button @click="loginOrRegister = true">去登入</el-button>
          </el-form>
        </div>
      </div>
    </transition>

    <div class="copyright">
      <p>Copyright © 2021 - 2023 xiaosanya.top All Rights Reserved. 版权所有</p>
      <p>粤ICP备20006496号-3</p>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "../../store/user";
import { ElMessage } from "element-plus";

const { login, register } = useUserStore();
const router = useRouter();
const registerRef = ref();
const loginRef = ref();
const loginOrRegister = ref(true);
const loginData = reactive({
  email: "",
  password: "",
});
const loginDataRules = reactive({
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 16, message: "长度在 6 到 16 个字符", trigger: "blur" },
  ],
});

const registerData = reactive({
  nickname: "",
  email: "",
  password: "",
});
const registerDataRules = reactive({
  nickname: [
    { required: true, message: "请输入昵称", trigger: "blur" },
    { min: 2, max: 16, message: "长度在 2 到 16 个字符", trigger: "blur" },
  ],
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 16, message: "长度在 6 到 16 个字符", trigger: "blur" },
  ],
  passwordagain: [
    {
      validator: (rule, value, callback) => {
        console.log(passwordagain.value, registerData.password);
        if (passwordagain.value !== registerData.password) {
          callback(new Error("两次输入密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
});

//登入表单验证
const handleLogin = () => {
  loginRef.value.validate(async (isvalidate, rule) => {
    // 整个表单进行一次规则验证 isvalidate 是否通过
    if (isvalidate) {
      //登入逻辑 路由跳转
      try {
        let res = await login(loginData);
        ElMessage.success(res);
        router.push("/");
      } catch (err) {
        ElMessage.error(err);
      }
    } else {
      return false;
    }
  });
};

const registerMany = () => {
  const userlist = [
    {
      email: "yongliang@163.com",
      password: "123456",
      nickname: "永亮",
      register: "2023-07-18",
    },
    {
      email: "pingan@163.com",
      password: "123456",
      nickname: "平凡",
      register: "2023-09-23",
    },
    {
      email: "guixia@163.com",
      password: "123456",
      nickname: "鬼侠",
      register: "2023-05-02",
    },
    {
      email: "beixing@163.com",
      password: "123456",
      nickname: "北行",
      register: "2023-11-27",
    },
    {
      email: "yifa@163.com",
      password: "123456",
      nickname: "医发",
      register: "2023-08-10",
    },
    {
      email: "weiding@163.com",
      password: "123456",
      nickname: "威鼎",
      register: "2023-09-08",
    },
    {
      email: "weixue@163.com",
      password: "123456",
      nickname: "伟雪",
      register: "2023-06-28",
    },
    {
      email: "maming@163.com",
      password: "123456",
      nickname: "马明",
      register: "2023-07-25",
    },
    {
      email: "pingan@126.com",
      password: "123456",
      nickname: "平凡",
      register: "2023-08-09",
    },
    {
      email: "guixia@126.com",
      password: "123456",
      nickname: "鬼侠",
      register: "2023-04-09",
    },
    {
      email: "beixing@126.com",
      password: "123456",
      nickname: "北行",
      register: "2023-07-19",
    },
    {
      email: "yongliang@126.com",
      password: "123456",
      nickname: "永亮",
      register: "2023-09-18",
    },
    {
      email: "weixia@126.com",
      password: "123456",
      nickname: "伟侠",
      register: "2023-07-08",
    },
    {
      email: "xiaoming@126.com",
      password: "123456",
      nickname: "小明",
      register: "2023-08-15",
    },
    {
      email: "xueping@126.com",
      password: "123456",
      nickname: "雪萍",
      register: "2023-09-30",
    },
  ];
  for (const item of userlist) {
    register({ user: item, authorizationCode: "" })
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  }
};

//注册表单验证
const handleRegister = () => {
  registerMany() //生成多个测试数据
  registerRef.value.validate(async (isvalidate) => {
    // 整个表单进行一次规则验证 isvalidate 是否通过
    if (isvalidate) {
      //注册逻辑 路由跳转
      try {
        let data = await register({ user: registerData, authorizationCode });
        ElMessage.success(data);
        loginOrRegister.value = true;
        loginData.email = registerData.email;
      } catch (err) {
        console.log(err);
        ElMessage.error(err);
      }
      // .then((res) => {
      //   // 登入成功需要做路由跳转了
      // })
      // .catch((err) => {
      // });
      return true;
    } else {
      return false;
    }
  });
};
//授权码 输入
const authorizationCode = ref("");
//二次密码验证输入
const passwordagain = ref("");
</script>

<style lang="scss" scoped>
//切换动画
.toggle-enter-active {
  transition: all 0.7s;
}
.toggle-leave-active {
  transition: all 0.5s;
}

.toggle-enter-from {
  opacity: 0;
  transform: rotate(0deg) scale(0.8);
}
.toggle-enter-to {
  opacity: 1;
  transform: rotateY(360deg) scale(1);
}

.toggle-leave-from {
  opacity: 1;
  transform: rotateY(0deg) scale(1);
}
.toggle-leave-to {
  opacity: 0;
  transform: rotateY(360deg) scale(0.8);
}

.animation-box {
  position: relative;
  width: 100%;
  height: 100%;
}
.outbox {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  flex-direction: column;
  background: rgb(214, 185, 221);
  background: linear-gradient(
    90deg,
    rgba(214, 185, 221, 1) 4%,
    rgba(184, 184, 230, 1) 20%,
    rgba(175, 175, 236, 1) 72%,
    rgba(170, 223, 234, 1) 100%
  );
  .copyright {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0%);
    font-size: 14px;
    color: rgb(59, 59, 59);
    text-align: center;
    position: absolute;
    bottom: 0;
  }
}
.loginbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 6px;
  border-bottom-left-radius: 40px;
  border-top-right-radius: 40px;

  width: 360px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12), inset 0px 0px 10px gray;
  .title {
    text-align: center;
    margin-bottom: 70px;
    font-size: 20px;
    font-weight: 600;
  }
}
.righsterbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 6px;
  border-bottom-right-radius: 40px;
  border-top-left-radius: 40px;
  width: 500px;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12), inset 0px 0px 10px gray;
  .title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: 600;
  }
}
</style>
